<template>
    <el-dialog :visible.sync="visible" width="900px">
        <el-table :data="students" border highlight-current-row header-cell-class-name="table-header">
            <el-table-column prop="student_name" label="姓名" />
            <el-table-column prop="course_num" label="所销课时" />
            <el-table-column prop="sign_result_text" label="签到结果" />
            <el-table-column prop="created_at" label="签到时间" width="160" />
            <el-table-column label="签到" width="400">
                <template slot-scope="{ row }">
                    <el-button :icon="row.sign_result == 1 ? 'el-icon-check' : ''" size="mini" :type="row.sign_result == 1 ? 'primary' : ''" @click="sign(row.student_id, 1)">正常</el-button>
                    <el-button :icon="row.sign_result == 2 ? 'el-icon-check' : ''" size="mini" :type="row.sign_result == 2 ? 'success' : ''" @click="sign(row.student_id, 2)">迟到</el-button>
                    <el-button :icon="row.sign_result == 3 ? 'el-icon-check' : ''" size="mini" :type="row.sign_result == 3 ? 'warning' : ''" @click="sign(row.student_id, 3)">请假</el-button>
                    <el-button :icon="row.sign_result == 4 ? 'el-icon-check' : ''" size="mini" :type="row.sign_result == 4 ? 'danger' : ''" @click="sign(row.student_id, 4)">旷课</el-button>
                    <el-button icon="el-icon-delete" size="mini" @click="sign(row.student_id, 0)" />
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>
<script>
import courseArrangeApi from '@/api/course-arrange' // 导入课程排课API
export default {
    name: 'ArrangeSign',
    data() {
        return {
            visible: false,
            arrangeCourseId: 0,
            students: []
        }
    },
    methods: {
        show(arrangeCourseId) {
            if (arrangeCourseId === this.arrangeCourseId) {
                this.visible = true
                return // 如果课程ID相同，则不重新获取学生列表(防止切换课程时，学生列表不更新)
            }
            this.arrangeCourseId = arrangeCourseId
            this.getSignLogs()
        },
        sign(studentId, result) {
            this.$confirm('确定修改签到吗?').then(() => {

                // 输入签到课时数量
                if (result === 1 || result === 2) {
                    this.$prompt('请输入签到课时数量', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputPattern: /^[0-9]*$/,
                        inputErrorMessage: '请输入数字'
                    }).then(({ value }) => {
                        courseArrangeApi.sign(this.arrangeCourseId, studentId, result, value).then(res => {
                            this.getSignLogs()
                            this.$emit('signed')
                        })
                    })
                } else {
                    courseArrangeApi.sign(this.arrangeCourseId, studentId, result, 0).then(res => {
                        this.getSignLogs()
                        this.$emit('signed')
                    })
                }
            }).catch(() => {})
        },
        getSignLogs() { // 获取签到记录
            this.students = [] // 清空学生列表
            const loading = this.$loading({ title: '加载中...' }) // 显示加载动画
            courseArrangeApi.signLogs(this.arrangeCourseId).then(response => {
                loading.close()
                this.visible = true
                this.students = response.data
            })
        }
    }
}
</script>
